<template>
  <!-- 新日账单明细 -->
  <div class="home-page-container">
    <!-- search 查询 -->
    <el-card shadow="never">
      <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'orderSettlementTimeStart', 'orderSettlementTimeEnd')"
        :loading="tableLoading">
        <template slot="handler">
          <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
          <!-- <el-button size="mini" @click="gotoOldDetail">8月4日前账单明细 >>></el-button> -->
        </template>
      </mer-search>
    </el-card>
    <!-- summary 汇总信息 -->
    <sum-panel :labelMap="sumLabel" :sumInfo="sumInfo"></sum-panel>
    <!-- table 表格 -->
    <el-card shadow="never">
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange"
        :hasIndex="false">
      </mer-table>
    </el-card>
  </div>
</template>
<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import dailyBillMix from '@/views/finance/mixins/posDailyBill';
import { getDailyDetailQueryApi, getDailyDetailSummaryApi, getDailyDetailListApi, downloadDailyDetailListApi } from '@/api/finance/posOrderDetail'
import { receiveBusinessList } from '@/api/finance'
  // 查询表单配置
let formConfig = [
  { label: '油站', type: 'select', modelName: 'gasId', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'gasName', selectValue: 'gasId' },
  { label: '订单号', type: 'input', modelName: 'orderCode', placeholder: '', maxlength: 100 },
  { label: '支付时间', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss',pickerOptions:{}, clearable:false },
  { label: '账单类型', type: 'select', modelName: 'orderType', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' },
  { label: '结算方', type: 'select', modelName: 'receiveBusiness', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' }
]
// 表格参数配置
let tableConfig = [
  { label: '订单号', prop: 'orderCode', width: 190 },
  { label: '油站名称', prop: 'gasName', width: 200 },
  { label: '订单结算时间', prop: 'dealTime', width: 150 },
  { label: '加油金额(元)', prop: 'amountGun', width: 136 },
  { label: '应结算金额(元)', prop: 'amount', width: 136 },
  { label: '通道费金额(元)', prop: 'slottingFee', width: 136 },
  { label: '实际结算金额(元)', prop: 'realSettlementAmount', width: 136 },
  { label: '结算方', prop: 'receiveBusinessName', width: 136 },
  { label: '油号', prop: 'oilNumName', width: 136 },
  { label: '枪号', prop: 'gunNo', width: 136 },
  { label: '升数', prop: 'litre', width: 136 },
  { label: '通道费结算周期', prop: 'slottingCycleName',width: 136 },
  { label: '账单类型', prop: 'orderTypeName',width: 136 },
  { label: '账单状态', prop: 'billStatusName',width: 136 },
]

export default {
  name: 'posBill_dailyBillDetail',
  mixins:[ listPage, queryMix, dailyBillMix ],
  data(){
    return{
      tradeTime:'',
      formConfig,
      tableConfig
    }
  },
   created(){
    this.initPage()
  },
  methods:{
    initPage () {
      this.initQuery()
      this.getAllQueryProps()
      this.receiveBusinessListApi()
      this.initList(getDailyDetailListApi,true,getDailyDetailSummaryApi)
    },  
    // 设置默认查询条件，默认时间间隔2天
    initQuery () {
      this.tradeTime = ''
      this.initTime('tradeTime', 1, 'searchBar', false, 'orderSettlementTimeStart', 'orderSettlementTimeEnd')
      const { tradeTime, pickerOptions } = this
      const initObj = { tradeTime: [tradeTime, pickerOptions] }
      this.setSearchConfig(initObj)
    },
    getAllQueryProps(){
      this.getQueryStatus()
      //获取油站
      this.getAllGasStations()
    },
    // 获取查询条件：交易类型
    async getQueryStatus () {
      try{
        const { code, result = [] } = await getDailyDetailQueryApi()
        if(code !== 200) return
        const initObj = { orderType: this.optionsWrapper(result) }
        this.setSearchConfig(initObj)
      }catch(err){
        console.log(err)
      }
    },
    // 结算方式枚举
    async receiveBusinessListApi () {
      try {
        let { code, result } = await receiveBusinessList()
        if(code !== 200) return
        const initObj = { receiveBusiness: this.optionsWrapper(result.receiveBusiness) }
        this.setSearchConfig(initObj)
      } catch (error) {
        console.log(error)
      }
    },
    //导出
    download () {
      this.downloadFile(downloadDailyDetailListApi,'结算日账单明细')
    },
    gotoOldDetail(){
      this.$router.push({path:'/bill/oldBillDetailList'})
    },
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
</style>
